/**
 * @file 学部看板报表
 * @author ruanairuo(ruanairuo@baijia.com)
 * @date 2020-03-18
 */
import React, {useState} from 'react';
import {Card} from 'antd';
import Carousel from '~/page/FineBi/common/Carousel';
import UserRoundTabs from '~/page/FineBi/common/UserRoundTabs';
import {userRoundIdx, initUserRoundIdx} from '~/utils/const';
import DataText from '~/page/FineBi/common/DataText';
import CommonTitle from '../common/Title';
import TargetAndSynthesisRate from './components/targetAndSynthesisRate';
import GeneralCard from './components/generalCard';
import CompositeYieldRate from './components/compositeYieldRate';
import ClassTypeRate from './components/classType';
import ContinuousTerm from './components/continousTerm';
import Lecturer from './components/lecturerXubanSurvey';
import './index.styl';

const initDimensionAndValues = [
    {
        dimensionId: `DepartmentDimensionReport_Title_select_${userRoundIdx}`,
        dimensionName: userRoundIdx,
        // 一轮班 1 二轮班 2
        value: [initUserRoundIdx]
    }
];

export default function DepartBoardReport(props) {
    // const [dimensionAndValues, setDimensionAndValues] = useState(initDimensionAndValues);
    const [userRoundValue, setUserRoundValue] = useState(initUserRoundIdx);

    const handleRadioChange = e => {
        const {value} = e.target;
        initDimensionAndValues.value = value;

        setUserRoundValue(value);
    };

    return (
        <div className="depart-board-container">
            <Carousel />
            <div style={{marginBottom: 8}}>
                <CommonTitle
                    title="学部维度续班看板"
                    iconDom={(
                        <UserRoundTabs
                            onRadioChange={handleRadioChange}
                        />
                    )}
                />
                <Card>
                    <DataText
                        dId="DepartmentDimensionReport_Title"
                        unitId="DepartmentDimensionReport_Title_text"
                    />
                </Card>
            </div>
            <div className="depart-space-height">
                <GeneralCard
                    userRoundValue={userRoundValue}
                    initPropDimensionAndValues={initDimensionAndValues}
                />
            </div>
            <div className="depart-space-height">
                <CompositeYieldRate
                    userRoundValue={userRoundValue}
                    initPropDimensionAndValues={initDimensionAndValues}
                />
            </div>
            <div className="depart-space-height">
                <TargetAndSynthesisRate
                    userRoundValue={userRoundValue}
                    initPropDimensionAndValues={initDimensionAndValues}
                />
            </div>
            <div className="depart-space-height">
                <ClassTypeRate
                    userRoundValue={userRoundValue}
                    initPropDimensionAndValues={initDimensionAndValues}
                />
            </div>
            <div className="depart-space-height">
                <ContinuousTerm
                    userRoundValue={userRoundValue}
                    initPropDimensionAndValues={initDimensionAndValues}
                />
            </div>
            <div className="depart-space-height">
                <Lecturer
                    userRoundValue={userRoundValue}
                    initPropDimensionAndValues={initDimensionAndValues}
                />
            </div>
        </div>
    );
}

